<script lang="jsx">
import '@/components/BaseTree/BaseTree.less'
import {Tree} from 'ant-design-vue'

export default {
  components: {},
  data() {
    return {}
  },
  props: Object.assign({}, Tree.props, {
    //{key:''}
    showChildrenCount: {
      type: Object,
      default: () => undefined
    }
  }),
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    //parentId, name, id, children, disableCheckbox
    trans({data, keys}) {
      if (!keys) {
        keys = ['parentId', 'name', 'id', 'children']
      }
      let transData = []
      const go = (data) => {
        for (let item of data) {
          let newItem = {}
          for (var i = 0; i < keys.length; i++) {
            if (keys[i] != 'children') {
              newItem[keys[i]] = item[keys[i]]
            }
          }
          transData.push(newItem)
          if (item.hasOwnProperty('children') && item.children) {
            go(item.children)
          }
        }
      }
      go(data)
      return transData
    },
    listToTree({list, childrenKey, parentIdKey}) {
      var map = {},
          node,
          roots = [],
          i
      for (i = 0; i < list.length; i += 1) {
        map[list[i].id] = i
        list[i][childrenKey] = []
      }
      for (i = 0; i < list.length; i += 1) {
        node = list[i]
        if (node[parentIdKey] !== '0' && list[map[node[parentIdKey]]]) {
          list[map[node[parentIdKey]]][childrenKey].push(node)
        } else {
          roots.push(node)
        }
      }
      return roots
    },
    defaultExpandAction(treeData) {
      let expandKeys = []
      if (treeData && treeData && treeData[0] && treeData[0].hasOwnProperty('children') && treeData[0].children.length > 0) {
        expandKeys.push(treeData[0].id)
        treeData[0].children.forEach((res) => {
          expandKeys.push(res.id)
        })
      }
      return expandKeys
    },
    setNodeAttrByNodeId({arrValue, id, values}) {
      if (!arrValue) {
        for (var i = 0; i < this.$props.treeData.length; i++) {
          if (this.$props.treeData[i].id == id) {
            values.forEach((res) => {
              this.$props.treeData[i][res.key] = res.value
            })
            break
          }
          if (this.$props.treeData[i].hasOwnProperty('children')) {
            this.setNodeAttrByNodeId({
              arrValue: this.$props.treeData[i]['children'],
              id,
              values
            })
          }
        }
      } else {
        for (var i = 0; i < arrValue.length; i++) {
          if (arrValue[i].id == id) {
            values.forEach((res) => {
              arrValue[i][res.key] = res.value
            })
            break
          }
          if (arrValue[i].hasOwnProperty('children')) {
            this.setNodeAttrByNodeId({
              arrValue: arrValue[i]['children'],
              id,
              values
            })
          }
        }
      }
    }
  },
  render() {
    let props = {
      ...this.$props,
      class: ['BaseTree']
    }
    let slots = {
      ...this.$slots,
      switcherIcon: (scope) => {
        if (scope.expanded) {
          return <down-outlined style={{fontSize: '12px'}}/>
        } else {
          return <right-outlined style={{fontSize: '12px'}}/>
        }
      },
      ...(() => {
        if (this.$props.hasOwnProperty('showChildrenCount') && !!this.$props.showChildrenCount && this.$props.showChildrenCount.hasOwnProperty('key')) {
          return {
            title: (scope) => {
              return (
                  <>
                    {!this.$slots.title && scope[this.$props.showChildrenCount.key]}
                    {this.$slots.hasOwnProperty('title') && this.$slots.title && this.$slots.title(scope)}
                    {scope.data && scope.data.children && Array.isArray(scope.data.children) && scope.data.children.length > 0 && (
                        <span
                            style="color:#978bb9;margin:0 0 0 0px;font-size:12px;position:relative;">（{scope.data.children.length}）</span>
                    )}
                    <span
                        style="margin-left:12px">{this.$slots.hasOwnProperty('action') && this.$slots.action && this.$slots.action(scope)}</span>
                  </>
              )
            }
          }
        }
        if (this.$slots.hasOwnProperty('title') && this.$slots.title != null) {
          return {
            title: this.$slots.title
          }
        }
      })(),
      icon: (scope) => {
        if (this.$slots.icon) {
          return <span className="treeNodeIcon">{this.$slots.icon(scope)}</span>
        } else {
          return {
            icon: this.$slots.icon
          }
        }
      }
    }
    const tree = <a-tree {...props} v-slots={slots}></a-tree>
    return <div>{tree}</div>
  }
}
</script>
